<!-- 
    头部面包屑
    emit(changeCollapse)改变左侧菜单的折叠状态子传父事件
 -->
<template>
    <div class="colLeft">
        <!-- 折叠菜单图标 -->
        <a href="javascript:void(0)" class="show-head" @click="isCollapse = !isCollapse"
            :title="isCollapse ? '展开' : '折叠'">
            <el-icon :size="25" :style="{ transform: 'rotate(' + (isCollapse ? -180 : 0) + 'deg)' }">
                <Fold />
            </el-icon>
        </a>
        <!-- 面包屑 -->
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/index/dashboard' }">{{ $t('home') }}</el-breadcrumb-item>
            <template v-for="item in $route.matched.slice(1)" :key="item.name">
                <template v-if="item.name != 'dashboard'">
                    <el-breadcrumb-item>{{ $t(item.meta.title as string) }}</el-breadcrumb-item>
                </template>
            </template>
        </el-breadcrumb>
    </div>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { Fold, ArrowRight } from '@element-plus/icons-vue';//图标 
const isCollapse = ref(false)//判断菜单是否折叠
// 使用defineEmits函数自定义事件
const emit = defineEmits<{ (e: 'changeCollapse', isCollapse: boolean): void }>()
// 监听折叠数据的变化
watch(isCollapse, (isCollapse) => {
    emit('changeCollapse', isCollapse)
})
</script>
<style lang="less" scoped>
.colLeft {
    display: flex;
    align-items: center;
}

.show-head {
    color: #000;
    text-decoration: none;
    margin-right: 20px;
    display: inline-block;

    &>i {
        transition: all 0.5s ease-out;
        vertical-align: middle;
    }
}
</style>



